<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="Content-Security-Policy" content="default-src %VSCODE_CSP%; style-src 'unsafe-inline';">
        <style>
            #stepTimes div.column {
                display: inline-block;
                padding: 0;
                margin: 0;
                vertical-align: top;
                margin-right: 1.5rem;
            }

            #stepTimes ul {
                list-style: none;
                padding-inline-start: 0;
                -webkit-padding-start: 0;
            }

            #stepTimes h3 {
                font-size: 1.25rem;
                background: var(--vscode-editor-foreground);
                color: var(--vscode-editor-background);
                padding: 0.1em 0.5em;
                margin: -0.25em 0 -0.25em 0;
                width: 12em;
                border-radius: 0.5em;
            }

            #stepTimes ul li {
                font-size: 1rem;
                border-radius: 0.5em;
                padding: 0;
                margin: 0 0 0em 1em;
                width: 14em;
                transition-property: opacity;
                transition-duration: 400ms;
            }

            #stepTimes ul li span.item {
                margin: 0 0.5em 0 0;
                padding: 0;
                margin: 0;
                /* font-weight: 600; */
                /* position: relative;
                        float: left; */
            }

            #stepTimes ul li span.pageTime {
                position: relative;
                float: right;
            }

            #timeInfo {
                padding: 0 0 1rem 0.5rem;
                width: calc(30rem - 1rem);
            }

            #timeInfo #total {
                font-size: 1.5rem;
                display: inline-block;
                width: 6em;
            }
            #timeInfo #total::after {
                content: 's';
                margin-left: 0.25rem;
                text-transform: none;
                letter-spacing: initial;
                display: inline-block;
            }

            /* #timeInfo #eta {
                        font-size: 1.5rem;
                        float: right;
                    }
                    #timeInfo #eta::before {
                        content: "Eta";
                        margin-right: 0.5em;
                    } */

            #compilationSpeed {
                height: 15rem;
                width: calc(95vw - 3rem);
            }

            .timeBar {
                opacity: 0.2;
                height: 1.1em;
                position: relative;
                margin-top: 0.1em;
                margin-bottom: -1.2em;
                box-sizing: border-box;
                margin-left: -0.3em;
                border-radius: 0.2em;
                transition-property: width opacity;
                transition-duration: 400ms;
            }

            #stepTimes ul li:hover .timeBar {
                opacity: 0.5;
            }
            #stepTimes ul li:hover {
                opacity: 0.8;
            }

            .tex,
            .latex {
                line-height: 1;
                margin-left: 0.02em;
            }

            .tex sub,
            .latex sub,
            .latex sup {
                text-transform: uppercase;
            }

            .tex sub,
            .latex sub {
                vertical-align: -0.28ex;
                margin-left: -0.1667em;
                margin-right: -0.1em;
            }

            .tex,
            .latex,
            .tex sub,
            .latex sub {
                font-size: 1em;
            }

            .latex sup {
                font-size: 0.85em;
                vertical-align: 0.2em;
                margin-left: -0.32em;
                margin-right: -0.15em;
            }
        </style>
    </head>
    <body>
        <h1><span class="latex">L<sup>A</sup>T<sub>E</sub>X</span> Compilation Live Info</h1>

        <div style="display: none">
            <span id="1rem" style="width: 1rem; padding: 0"></span>
            <span id="color0" style="color: var(--vscode-editor-foreground)"></span>
            <span id="color1" style="color: var(--vscode-terminal-ansiBlue)"></span>
            <span id="color2" style="color: var(--vscode-terminal-ansiGreen)"></span>
            <span id="color3" style="color: var(--vscode-terminal-ansiRed)"></span>
            <span id="color4" style="color: var(--vscode-terminal-ansiYellow)"></span>
            <span id="color5" style="color: var(--vscode-terminal-ansiCyan)"></span>
            <span id="color6" style="color: var(--vscode-terminal-ansiMagenta)"></span>
            <span id="color7" style="color: var(--vscode-terminal-ansiWhite)"></span>
        </div>

        <canvas id="compilationSpeed"></canvas>

        <div id="timeInfo">
            <span id="total">Total</span>
            <!-- <span id="eta"></span> -->
        </div>
        <div id="stepTimes"></div>

        <script src="%VSCODE_RES%/buildinfo/buildinfo.js"></script>
    </body>
</html>
